<template>
  <view>
    <view class="modal-content ss-flex-1">
      <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
      <radio-group @change="onTapPay">
        <label
            class="pay-type-item"
            v-for="item in payMethods"
            :key="item.title"
        >
          <view
              class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
              :class="{ 'disabled-pay-item': item.disabled }"
              v-if="allowedPayment.includes(item.value)"
          >
            <view class="ss-flex ss-col-center">
              <image
                  class="pay-icon"
                  v-if="item.disabled"
                  src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/选中.png"
                  mode="aspectFit"
              >
              </image>
              <image class="pay-icon" v-else :src="item.icon" mode="aspectFit">
              </image>
              <text class="pay-title">{{ item.title }}</text>
            </view>
            <view class="check-box ss-flex ss-col-center ss-p-l-10">
              <view
                  class="userInfo-money ss-m-r-10"
                  v-if="item.value == 'money'"
              >
                余额: {{ userInfo.price || 0 }}元
              </view>
              <view
                  class="userInfo-money ss-m-r-10"
                  v-if="item.value == 'offline' && item.disabled"
              >
                部分商品不支持
              </view>
              <radio
                  :value="item.value"
                  color="#FF7A0C"
                  style="transform: scale(0.8)"
                  :disabled="item.disabled"
                  :checked="state.payment === item.value"
              />
            </view>
          </view>
        </label>
      </radio-group>
    </view>
  </view>
</template>

<script>
import sheep from "@/sheep";

export default {
  props: {
    // 支付方式
    state: {
      type: Object,
    },
    // 订单类型
    orderType: {
      type: String,
    },
    // 是否显示混合支付
    showMixed: {
      type: Boolean,
      default: false, // 默认不显示
    },
  },
  data() {
    return {
      userInfo: sheep.$store("user").userInfo,
      payMethods: [
        {
          icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/d6700c8ae26b43c2bcb7a902b0282977.png",
          title: "微信支付",
          value: "wechat",
          disabled: false,
        },
        {
          icon: "/icons/alipay.png",
          title: "支付宝支付",
          value: "alipay",
          disabled: false,
        },
        {
          icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/3e2607e35b5f4c668e79dd2b211e1bba.png",
          title: "余额支付",
          value: "money",
          disabled: false,
        },
        ...(this.showMixed
          ? [
              {
                icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/d6700c8ae26b43c2bcb7a902b0282977.png",
                title: "混合支付",
                value: "mixed",
                disabled: false,
              },
            ]
          : []),
        ...(this.showMixed
            ? [
              {
                icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/d6700c8ae26b43c2bcb7a902b0282977.png",
                title: "商品卡",
                value: "card",
                disabled: false,
              },
            ]
            : []),
        {
          icon: "/icons/apple.png",
          title: "Apple Pay",
          value: "apple",
          disabled: false,
        },
        {
          icon: "/icons/cod.png",
          title: "货到付款",
          value: "offline",
          disabled: false,
        },
      ],
    };
  },
  computed: {
    allowedPayment() {
      if (this.orderType === "recharge") {
        return sheep.$store("app").platform.recharge_payment;
      }
      return sheep.$store("app").platform.payment;
    },
  },
  mounted() {
    console.log("mounted", this.state, this.allowedPayment);
  },
  methods: {
    onTapPay(e) {
      console.log("onTapPay", e);
      this.$emit("onTapPay", e.detail.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 26rpx;
}

.modal-content {
  overflow-y: auto;

  .pay-title {
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
  }

  .pay-tip {
    font-size: 26rpx;
    color: #bbbbbb;
  }

  .pay-item {
    height: 86rpx;
  }

  .disabled-pay-item {
    .pay-title {
      color: #999999;
    }
  }

  .userInfo-money {
    font-size: 26rpx;
    color: #bbbbbb;
    line-height: normal;
  }
}
</style>
